<template>
    <div
        class="box-group-wrap Order"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <p class="title">
            <span style="width: 70px;">工单列表</span>
            <span class="showmore" @click="showOrderMore">查看更多</span>
        </p>
        <!-- <div class="line"></div> -->
        <div v-if="isShowView" class="nodatalist">
            <img src="@/assets/img/khindex/nuMessage.png" alt width="40px" />
            <p>暂无工单信息</p>
        </div>
        <div v-else class="trainingMain orderList">
            <el-tabs type="border-card">
                <el-tab-pane label="工作流工单">
                    <ul class="smollTable">
                        <li class="headTitle">
                            <b style="width: 37%;">工单类型</b>
                            <b style="width: 30%;">工单状态</b>
                            <b style="width: 28%;">创建时间</b>
                        </li>
                        <div class="listLine"></div>
                        <li v-for="item in orderList" :key="item.sheetId">
                            <span class="blueCirle"></span>
                            <i
                                class="trainingServe"
                                :title="item.typeCode"
                                style="width: 37%;"
                            >{{item.typeCode|getWorkType(workTypeList)}}</i>
                            <i
                                class="trainingServe"
                                :title="item.statusCode"
                                style="width: 30%;"
                            >{{item.statusCode|getWorkType(workstsList)}}</i>
                            <i
                                class="trainingServe"
                                :title="item.createTime"
                                style="width: 28%;"
                            >{{item.createTime|getDateYMDHM}}</i>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="投诉工单">
                    <ul>
                        <li class="headTitle">
                            <b>工单发起人</b>
                            <b>工单状态</b>
                            <b>发起时间</b>
                        </li>
                        <div class="listLine"></div>
                        <li v-for="item in tableData" :key="item.WrkId">
                            <span class="blueCirle"></span>
                            <i
                                class="trainingServe"
                                :title="item.DealHndlr"
                                style="width: 30%;"
                            >{{item.DealHndlr}}</i>
                            <i
                                class="trainingServe"
                                :title="item.WrkSts"
                                style="width: 30%;"
                            >{{item.WrkSts|getSts(tsgdstsList)}}</i>
                            <i
                                class="trainingServe"
                                :title="item.SetlDt"
                                style="width: 34%;"
                            >{{item.SetlDt|getDateYMDHM}}</i>
                        </li>
                    </ul>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog
            :close-on-click-modal="true"
            :visible.sync="Show"
            append-to-body
            center
            class="closeDialogShow"
        >
            <!-- /com.cupd.crs.anonymous.view.OrderTaskDetail.d -->
            <div slot="title">工单列表</div>
            <el-tabs type="border-card">
                <el-tab-pane label="工作流工单">
                    <el-table :data="orderListAll" width="100%" stripe border class="heard-bg">
                        <el-table-column label="工单编码" prop="showId">
                            <template slot-scope="scope">
                                <a
                                    class="text_a"
                                    :href="'/'+flowserverBackendAUrl+'?BANKNUM=6440&businessId=6440_'+scope.row.showId+'&USERID='+userInfo.userAccount"
                                    target="_blank"
                                >{{scope.row.showId}}</a>
                            </template>
                        </el-table-column>
                        <el-table-column label="工单发起人" prop="workerId" width="100px"></el-table-column>
                        <el-table-column label="工单类型" prop="typeCode">
                            <template
                                slot-scope="scope"
                            >{{scope.row.typeCode|getWorkType(workTypeList)}}</template>
                        </el-table-column>
                        <el-table-column label="额定完成时间" prop="completeTime">
                            <template slot-scope="scope">{{scope.row.createTime|getDate}}</template>
                        </el-table-column>
                        <el-table-column label="工单状态" prop="statusCode">
                            <template
                                slot-scope="scope"
                            >{{scope.row.statusCode|getWorkType(workstsList)}}</template>
                        </el-table-column>
                        <el-table-column label="任务开始时间" prop="createTime">
                            <template slot-scope="scope">{{scope.row.createTime|getDate}}</template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="投诉工单">
                    <el-table :data="tableDataAll" width="100%" stripe border class="heard-bg">
                        <el-table-column label="工单编号" prop="WrkId"></el-table-column>
                        <el-table-column label="工单发起人" prop="DealHndlr"></el-table-column>
                        <el-table-column label="客户名称" prop="CusNm"></el-table-column>
                        <el-table-column label="发起时间" prop="SetlDt"></el-table-column>
                        <el-table-column label="工单状态" prop="WrkSts">
                            <template slot-scope="scope">{{scope.row.WrkSts|getSts(tsgdstsList)}}</template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import Pagination from '../../components/Pagination/Pagination.vue';
import { getTokenHsbankNo } from '@/utils/auth';
import request from '@/apis/request';
import { getDictSelectList } from '@/utils/Common';

export default {
    name: 'Order',
    components: {
        Pagination,
    },
    data() {
        return {
            orderList: [],
            orderListAll: [],
            // defaultCardInfo: this.$store.getters.cardInfo_3004, // 信用卡信息 可以用多卡 3004按卡号查询卡资料信息
            // 当前页码
            currentPage: 0,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 表格内容
            tableData: [],
            tableDataAll: [],
            Show: false,
            isShowView: false,//是否显示视图
            workstsList: [],//工作流工单状态
            workTypeList: [],//工作流工单类型
            loginId: '',
            pageLoading: true,
            tsgdstsList: [],//投诉工单状态
        };
    },
    filters: {
        // 拼接日期 时间
        getDate(time) {
            let dat = new Date(time);
            const resTime = moment(`${dat}`).format('YYYY-MM-DD');
            return resTime;
        },
        // 拼接日期 时间
        getDateYMDHM(time) {
            if (time === '') {
                return '';
            }
            let dat = new Date(time);
            const resTime = moment(`${dat}`).format('YYYY-MM-DD');
            return resTime;
        },
        getSts(val, tsgdstsList) {
            let value = (`${val}`).trim();
            for (let index = 0; index < tsgdstsList.length; index++) {
                const element = tsgdstsList[index];
                if (element.code === value) {
                    return element.label;
                }
            }
            return value;
        },
        getWorkType(val, list) {

            let value = (`${val}`).trim();
            for (let index = 0; index < list.length; index++) {
                const element = list[index];
                if (element.code === value) {
                    return element.label;
                }
            }
            return value;
        },
    },
    async mounted() {
        // this.getserveOrder();
        this.workstsList = await getDictSelectList('WORKSTS', this);
        this.workTypeList = await getDictSelectList('WORKTYPE', this);
        this.tsgdstsList = await getDictSelectList('TSGDSTS', this);

        await this.getInitData();
        if (this.orderListAll.length < 1 && this.tableDataAll.length < 1) {
            this.isShowView = true;
        } else {
            this.isShowView = false;
        }
    },
    // 取缓存信息
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'defaultParams',
            'userInfo',
            'flowserverBackendAUrl'
        ]),
    },
    methods: {
        // 获取工单表格数据
        async getInitData(id) {

            this.orderList = [];
            this.orderListAll = [];

            this.tableData = [];
            this.tableDataAll = [];

            // console.log('检查字典是否有值————————',this.workstsList, this.workTypeList );

            // 设置请求参数 -- 0001 交易
            console.log("投诉工单查询条件：", this.cardInfo_3004.CUSTID);
            if (this.cardInfo_3004.CUSTID != '' && this.cardInfo_3004.CUSTID != undefined) {
                const appBody = {
                    IdentNo: this.cardInfo_3004.CUSTID, // 证件类型
                    BgnDt: moment(new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 180))).format('YYYYMMDD'), // 起始日期
                    EndDt: moment(new Date()).format('YYYYMMDD'), //  结束日期

                };
                const params = JSON.parse(JSON.stringify(this.defaultParams));
                params.body.appHead.tranCode = '00001';
                params.body.appBody = appBody;
                // 跑 00001交易
                await this.$post.common.esbtran(params).then(async (res) => {
                    this.pageLoading = false;
                    if (res.status === 200) { // 接口请求成功
                        // 
                        this.isShowView = false;
                        const result = JSON.parse(res.data.jsonRes);
                        console.log(result, 'result -- 00001');
                        if (result.sysHead.rspCd === '000000') {
                            let list = result.body.appBody.array.WrkShdInf || [];
                            const arrList = [];
                            if (Object.prototype.toString.call(list) === "[object Object]") {
                                arrList.push(list);
                                list = arrList;
                            }
                            if (list.length > 0) {
                                for (let i = 0; i < list.length; i++) {
                                    await this.getLoginId(list[i].DealHndlr);
                                    list[i].DealHndlr = this.loginId;
                                }
                            }

                            this.tableDataAll = list;
                            console.log('list__2', list, this.tableDataAll, arrList);
                            if (list.length > 3) {
                                this.tableData.push(list[0]);
                                this.tableData.push(list[1]);
                                this.tableData.push(list[2]);
                            } else {
                                this.tableData = list;
                            }
                            // if (this.tableData.length > 0) {
                            //     for (let i = 0; i < this.tableData.length; i++) {
                            //         await this.getLoginId(this.tableData[i].DealHndlr);
                            //         this.tableData[i].DealHndlr = this.loginId;
                            //     }
                            // }
                        }
                    }
                }, (reject) => {
                    console.log('00001___请求失败了', reject);
                    // this.isShowView = true;
                    this.pageLoading = false;
                });

                const url = `/ccwf/history.action?CUSTNO=${this.cardInfo_3004.CUSTID}&BANKNUM=6440&USERID=${this.userInfo.userAccount}`;
                // this.hrefUrl = `/ccwf/com.cupd.crs.anonymous.view.OrderTaskDetail.d?BANKNUM=6440&businessId=6440_20211116350002&&USERID=${this.userInfo.userAccount}`
                // /ccwf/com.cupd.crs.anonymous.view.OrderTaskDetail.d?BANKNUM=6440&businessId=6440_20211116350002&USERID=311

                await request({
                    url,
                    method: 'get',
                }).then((res) => {
                    this.isShowView = false;
                    const resList = res.data.result
                    console.log('查询工作流系统', resList);

                    if (resList.length > 5) {
                        for (let index = 0; index < 5; index++) {
                            this.orderList.push(resList[index]);
                        }
                    } else {
                        this.orderList = resList;
                    }
                    this.orderListAll = resList;
                    this.pageLoading = false;
                });
            } else {
                // this.isShowView = true;
                this.pageLoading = false;
            }
        },
        async getLoginId(workId) {
            var checkParam = {
                'compId': workId,
            };
            await this.$post.ComUserList.getByCompId(checkParam).then((res) => {
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        if (res.data.content) {
                            this.loginId = res.data.content.userAccount;
                        } else {
                            this.loginId = workId;
                        }
                    }
                }
            });
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData();
        },
        showOrderMore() {
            // 改成弹框
            this.Show = true;
        },
        // 工单信息
        // getserveOrder() {
        //     const params = {
        //         pageNum: 1,
        //         pageSize: 5,
        //         companyId: getTokenHsbankNo('HsbankNo'),
        //         custCertNo: this.cardInfo_3004.CUSTID,
        //     };
        //     if (!this.cardInfo_3004.CUSTID) {
        //         return;
        //     }
        //     this.$post.customer.orderPage(params).then((res) => {
        //         if (res.status === 200) {
        //             this.orderList = res.data.content.recordList;
        //         }
        //     });
        // },
    },
};
</script>
<style lang="scss">
.Order {
    .el-tabs__item {
        height: 34px;
        line-height: 34px;
    }
    .orderList {
        .el-tabs .el-tabs__content {
            min-height: 140px;
            padding: 0 5px;
            .headTitle {
                display: flex;
                b {
                    flex: 1;
                    text-align: center;
                }
            }
        }
    }
    .smollTable li {
        white-space: nowrap;
        line-height: 22px;
    }
}
.closeDialogShow {
    .el-dialog {
        width: 1000px;
        min-height: 440px;
    }

    .el-table__body-wrapper {
        overflow-y: auto;
        height: 440px;
    }
}
</style>

<style scoped lang="scss">
.pagination {
    margin-top: 20px;
    text-align: right;
}
.trainingMain ul li .trainingServe {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    /* border-right: 1px solid #ccc;
    margin-left: 2px; */
}
</style>
